<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-09 09:47:21
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-12-13 13:08:51
 * @Description: 文章管理
 * @FilePath: \tuanfeng-admin-front\src\pages\Article\index.vue
-->
<script setup lang="ts">
import moment from "moment";
import { Search, Plus } from "@element-plus/icons-vue";
import SearchItem from "../../components/SearchItem.vue";
import TableCell from "../../components/TableCell.vue";
import EditDrawer from "../../components/EditDrawer.vue";
import Editor from "../../components/Editor.vue";
import LogDialog from "../../components/LogDialog.vue";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { updateArticleStatusAPI, deleteArticleAPI } from "../../api/article";
import useTable from "./useTable";
import useForm from "./useForm";
import { useRoute } from "vue-router";
import { useRoleStore } from "../../store/role.js";

const path = useRoute().path;
const permissions = useRoleStore().permissions;
const permission = permissions[path] || {};
console.log("permission", permission);

const logVisible = ref(false);
// 查询条件
let filters = reactive({
    id: "",
    title: "",
    artTypeCode: "",
    status: "",
    pageNo: 1,
    pageSize: 10,
});

// 列表数据
const { tableData, loading, totalCount, createTime, articleTypes, query } =
    useTable(filters);

// 编辑表单
const {
    dialogVisible,
    formRef,
    isEdit,
    form,
    editor,
    handleEdit,
    handleConfirm,
} = useForm(query);

// 更新状态
const handleUpdateStatus = (id: string, status: Number) => {
    updateArticleStatusAPI({
        id,
        status: status == 1 ? 0 : 1,
    }).then((res) => {
        if (res.code === 200) {
            query();
        }
    });
};

// 删除
const deleteArticle = (id: string) => {
    deleteArticleAPI({
        id,
    }).then((res) => {
        if (res.code === 200) {
            ElMessage({
                message: "删除成功",
                type: "success",
            });
            query();
        }
    });
};

const rules = reactive({
    title: [
        { required: true, message: "请输入文章标题", trigger: "blur" },
        { min: 1, max: 100, message: "长度不超过100个字", trigger: "blur" },
    ],
    artTypeCode: [
        { required: true, message: "请选择文章类型", trigger: "change" },
    ],
    publishTime: [{ required: true, message: "请选择发布时间", trigger: "change" }],
    content: [
        {
            required: true,
            // 自定义规则
            validator: (rule: any, value: any, callback: any) => {
                if (editor.value.valueHtml) {
                    callback();
                } else {
                    callback(new Error("请输入文章内容"));
                }
            },
        },
    ],
});
</script>

<template>
    <div>
        <el-card class="search-wrapper common-card">
            <el-row :gutter="24">
                <SearchItem label="文章id">
                    <el-input clearable style="width: 100%" placeholder="请输入文章id" v-model="filters.id"></el-input>
                </SearchItem>
                <SearchItem label="文章标题">
                    <el-input clearable style="width: 100%" placeholder="请输入文章标题" v-model="filters.title"></el-input>
                </SearchItem>
                <SearchItem label="文章类型">
                    <el-select style="width: 100%" v-model="filters.artTypeCode">
                        <el-option label="全部" value></el-option>
                        <el-option v-for="item in articleTypes" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </SearchItem>
                <SearchItem label="发布状态">
                    <el-select style="width: 100%" v-model="filters.status">
                        <el-option label="全部" value></el-option>
                        <el-option label="已发布" value="0"></el-option>
                        <el-option label="未发布" value="1"></el-option>
                    </el-select>
                </SearchItem>
                <SearchItem label="创建时间">
                    <el-date-picker v-model="createTime" value-format="x" style="width: 100%; box-sizing: border-box" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
                </SearchItem>
            </el-row>

            <div class="search-button-wrapper">
                <el-button v-if="permission['新增']" :icon="Plus" plain auto-insert-space @click="() => handleEdit(false)">新增</el-button>
                <el-button type="primary" :icon="Search" auto-insert-space @click="query">查询</el-button>
            </div>
        </el-card>

        <!-- Table -->
        <el-card class="common-card" style="width: 100%">
            <!-- 列表 -->
            <el-table v-loading="loading" :data="tableData" stripe>
                <el-table-column prop="id" label="id" width="120" />
                <el-table-column prop="title" label="文章标题" />
                <el-table-column prop="artTypeName" label="文章类型" />
                <el-table-column prop="publishTimeStr" label="发布时间" width="200" />
                <el-table-column prop="createDate" label="创建时间" width="200" />
                <el-table-column prop="updateDate" label="更新时间" width="200" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="scope">
                        <span :class="{
                            color_success: scope.row.status === 0,
                            color_info: scope.row.status === 1,
                        }">{{ scope.row.status === 0 ? "已发布" : "未发布" }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <!-- 发布 -->
                        <el-popconfirm v-if="permission['发布']" :title="`确定${scope.row.status === 0 ? '取消发布' : '发布'}吗?`" @confirm="handleUpdateStatus(scope.row.id, scope.row.status)">
                            <template #reference>
                                <el-button type="text">{{ scope.row.status === 0 ? "取消发布" : "发布" }}</el-button>
                            </template>
                        </el-popconfirm>
                        <!-- 编辑 -->
                        <el-button v-if="permission['编辑']" type="text" @click="() => handleEdit(scope.row)">编辑</el-button>
                        <!-- 删除 -->
                        <el-popconfirm v-if="permission['删除']" :title="`确定删除吗?`" @confirm="deleteArticle(scope.row.id)">
                            <template #reference>
                                <el-button class="color_danger" type="text">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>

                <template #empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <!-- 分页 -->
            <el-pagination style="margin-top: 20px; justify-content: flex-end" background layout="total, sizes, prev, pager, next" :total="totalCount" :default-current-page="1" v-model:current-page="filters.pageNo" v-model:page-size="filters.pageSize"></el-pagination>
            <div v-if="permission['操作日志']" style="text-align: center; margin-top: 10px">
                <el-button type="primary" link @click="logVisible = true">查看操作日志</el-button>
            </div>
        </el-card>

        <EditDrawer :width="850" :title="isEdit ? '编辑文章' : '新增文章'" :visible="dialogVisible" @update:visible="dialogVisible = $event" @confirm="handleConfirm">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="文章标题" prop="title">
                    <el-input style="width: 400px" maxlength="100" v-model="form.title" placeholder="最多可输入100个字"></el-input>
                </el-form-item>
                <el-form-item label="文章类型" prop="artTypeCode">
                    <el-select style="width: 400px" v-model="form.artTypeCode" placeholder="请选择文章类型">
                        <el-option v-for="item in articleTypes" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布时间" prop="publishTime">
                    <el-date-picker
                      v-model="form.publishTime"
                      type="datetime"
                      placeholder="请选择"
                      :clearable="false"
                      style="width: 400px"/>
                </el-form-item>
                <el-form-item label="文章内容" prop="content">
                    <Editor ref="editor" :content="form.content"></Editor>
                </el-form-item>
            </el-form>
        </EditDrawer>
        
        <LogDialog :visible="logVisible" :path="path" @update:visible="logVisible = $event"></LogDialog>
    </div>
</template>

<style lang="less" scoped>
@import url("../../assets/less/common.less");
@import url("../../assets/less/search.less");
</style>